<template>
	<view class="hb-page">
		<u-navbar bgColor="transparent" titleStyle="color:#fff" title="红包" leftIconColor="#fff" :autoBack="true"
			:placeholder="true">
			<view slot="right" style="color: #fff;font-size: 26rpx;" @click="gohbsy">红包收益</view>
		</u-navbar>
		<view class="head-box">
			<image :src="item.pic" mode=""></image>
			<view>{{item.name}}发出的红包</view>
		</view>
		<view class="text">恭喜发财，大吉大利</view>
		<view class="number" v-if="use_money > 0"><text>{{use_money}}</text>云矿石</view>
		<view class="tisp" v-if="use_money > 0">
			<view>
				已存入账户，可用云购买机器
			</view>
			<u-icon name="arrow-right" color="#EBCD9A" size="16"></u-icon>
		</view>
		<view class="line"></view>
		<view class="mintitle" v-if="red_packet_info.total_quantity>1&&time_to_finish!=0">
			{{red_packet_info.total_quantity}}个红包，{{time_to_finish}}被抢光
		</view>
		<view class="mintitle" v-else>
			{{red_packet_info.total_quantity}}个红包，剩余{{red_packet_info.total_quantity - red_packet_info.yiqiang}}个红包
		</view>
		<view class="list">
			<view class="list-item" v-for="(item,index) in grab_records" :key="index">
				<view class="left-head">
					<image :src="'https://web.sunsk.top'+item.avatar" mode=""></image>
					<view class="head-info">
						<view>{{item.nickname}}</view>
						<view class="time">{{item.grab_time}}</view>
					</view>
				</view>
				<view class="right-box">
					<view>{{item.grab_amount}}矿石</view>
					<view class="best" v-if="item.is_best_luck == 1">
						<image src="/static/chat/hg.png" mode=""></image>
						<view>手气最佳</view>
					</view>
					<view class="best" v-else>

					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: {},
				red_packet_info: {},
				time_to_finish: 0,
				use_money: 0,
				grab_records: []
			}
		},
		onLoad(e) {
			this.item = JSON.parse(decodeURIComponent(e.item))
			this.redpacketinfo()
		},
		methods: {
			gohbsy(){
				uni.navigateTo({
					url:'/pages/my/hbtext/index'
				})
			},
			redpacketinfo() {
				let params = {
					redPacketId: this.item.content.packet_id
				}
				this.$Request({
					method: 'POST',
					url: '/api/luckys/viewRedPacketRecords',
					data: params
				}).then(res => {
					if (res.code == 1) {
						this.red_packet_info = res.data.red_packet_info
						this.time_to_finish = res.data.time_to_finish
						this.use_money = res.data.use_money
						this.grab_records = res.data.grab_records
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.hb-page {
		width: 100%;
		height: 100vh;
		background-image: url('../../../static/chat/hb-top.png');
		background-repeat: no-repeat;
		background-size: 100% 222rpx;
		background-color: #17191A;

		.list {
			padding: 30rpx;

			.list-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 30rpx;

				.left-head {
					display: flex;
					align-items: center;

					image {
						width: 85rpx;
						height: 85rpx;
						border-radius: 10rpx;
						margin-right: 15rpx;
					}

					.head-info {
						color: #fff;

						.time {
							margin-top: 10rpx;
						}
					}

				}

				.right-box {
					color: #fff;
					font-size: 28rpx;
					text-align: right;

					.best {
						margin-top: 10rpx;
						font-size: 24rpx;
						display: flex;
						align-items: center;
						color: #c6c6c6;

						image {
							width: 27.49rpx;
							height: 23.77rpx;
							margin-right: 10rpx;
						}
					}
				}
			}
		}

		.head-box {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #EBCD9A;
			font-size: 32rpx;
			margin-top: 200rpx;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 10rpx;
			}

		}

		.text {
			text-align: center;
			font-size: 24rpx;
			color: #c6c6c6;
			margin-top: 24rpx;
		}

		.number {
			text-align: center;
			font-size: 32rpx;
			color: #EBCD9A;
			margin-top: 40rpx;

			text {
				font-size: 100rpx;
				margin-right: 10rpx;
			}
		}

		.tisp {
			color: #EBCD9A;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 16rpx;
		}

		.line {
			width: 100%;
			height: 20rpx;
			background: #232323;
			margin-top: 66rpx;
		}

		.mintitle {
			font-weight: 400;
			font-size: 24rpx;
			color: #c6c6c6;
			padding: 30rpx;
		}
	}
</style>